<template>
  <view class="details-container">
    <!-- 弹窗信息 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>

    <!-- 详情弹窗 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="title">
          <uni-icons class="icon" type="list" size="16"></uni-icons>
          <text>详情信息</text>
        </view>
        <view class="content">
          {{ room.info }}
        </view>
      </view>
    </uni-popup>
    <!-- 确认对话框 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="再想想" confirmText="确认申请" title="申请内容" :content="content"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <!-- 图片展示区 -->
    <view class="room_image">
      <image :src="room.img"></image>
      <view class="mask">
        <text class="tips">{{ room.name }}</text>
      </view>
    </view>
    <!-- 房间信息和预约人数 -->
    <view class="detail_room_info">
      <view class="room_location">
        <view class="floor">{{ room.floor }}F</view>
        <view class="room_number">房间号：{{ room.id }}</view>
      </view>
      <view class="room-notice">
        <view class="icon-text" @click="toggle('center')">
          <uni-icons type="chat" size="20" color="#7f7f7f"></uni-icons>
          <text>详情</text>
        </view>
        <view class="icon-text">
          <uni-icons type="staff" size="20" color="#7f7f7f"></uni-icons>
          <text>{{ room.capacity }}人</text>
        </view>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="line"></view>
    <!-- 预约日期 横向移动-->
    <view class="date">
      <view class="date-title">预约日期</view>
      <scroll-view scroll-x="true">
        <view class="date-list">
          <view class="date-item" v-for="(date, index) in dateList" :key="date.date"
            :class="{ active: DateIndex === index }" @click="selectDate(date.date, index)">
            <text class="day">{{ date.date.substring(5) || '' }}</text>
            <text class="week">{{ date.week || '' }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 分割线 -->
    <view class="line"></view>
    <!-- 预约时间 横向移动-->
    <view class="time">
      <view class="room-status-info">
        <view class="selected">已选中</view>
        <view class="occupied">不可预约</view>
      </view>
      <scroll-view scroll-x="true">
        <view class="time-list">
          <!-- 在time后面得加个state用于判断状态 -->
          <view class="time-item" v-for="(time, index) in timeList" :key="time"
            :class="{ active: TimeIndex === index, occupied: roomState[index] === 1 }" @click="selectTime(index)">
            <text class="start">{{ time.start }}</text>
            <text>~</text>
            <text class="end">{{ time.end }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 申请按钮 -->
    <view class="btn">
      <button class="apply" @click="submitData">申请研讨间</button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { applyRoomAsync, getRoomStateAsync, getRoomAsync } from '@/api/reservation.js'
export default {
  data () {
    return {

      room_id: '',// 路径参数id
      TimeIndex: -1, // 当前选择的时间的index
      DateIndex: -1, // 当前选择日期的index
      // 弹窗数据 类型 信息
      msgType: '',
      messageText: '',
      // 对话框提示内容
      content: '',
      room: {},//房间的信息
      roomState: [],//存接口返回的房间占用状态 active:0 occupied:1  
      date: '',//选择的日期
      userId: '1',
      startTime: '',
      endTime: '',
      //
    };
  },
  onLoad (option) {
    // 获取跳转参数id
    this.room_id = option.room_id
    this.getRoom()
  },
  methods: {
    //  获取房间信息
    async getRoom () {
      try {
        const res = await getRoomAsync({ id: this.room_id })
        this.room = res.data.data
      } catch (error) {
        console.log('%c [ getRoomAsync ]-126', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }

    },
    // 选择 日期 
    async selectDate (date, index) {
      this.DateIndex = index;
      this.date = date
      this.$forceUpdate()
      try {
        const params = {
          roomId: this.roomId,
          date
        }
        // 获取当天日期房间占用信息
        const res = await getRoomStateAsync(params)

        console.log('%c [  ]-145', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        if (res && res.data && res.data.length) {
          this.roomState = res.data
        }
      } catch (error) {
        console.log('%c [getRoomStateAsync  ]-145', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
    // 选择时间
    selectTime (index) {
      if (this.DateIndex === -1) return this.showMsg('error', '请先选择预约日期');
      // if (this.roomState[index] === 1) return this.showMsg('error', '该时间已经被占用，请选择其他时间');
      this.TimeIndex = index;
      this.startTime = this.timeList[index].start
      this.endTime = this.timeList[index].end
    },

    // 点击申请按钮
    submitData () {
      this.userId = this.token;
      if (this.userId.trim() === "") {
        return this.showMsg('error', '请先登录！')
      }
      if (this.DateIndex === -1 || this.TimeIndex === -1) return this.showMsg('error', '请选择预约日期和时间！');
      // 打开对话框
      this.msgType = 'success';
      this.content = `你正在申请预约:\n${this.date},${this.getTimeStr}\n${this.room_id}号研讨室的使用权,请确认以上信息！`;
      this.$refs.alertDialog.open();

      //此处需要修改  弹窗点击确定再执行下面的逻辑
    },
    // 是否申请对话框确认
    async dialogConfirm () {
      try {
        const params = {
          userId: this.userId,
          roomId: this.room.id,
          roomName: this.room.name,
          date: this.date,
          startTime: this.startTime,
          endTime: this.endTime
        }
        const res = await applyRoomAsync(params)

        console.log('%c [  ]-214', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        this.messageText = `你成功预约了 ${this.date},${this.getTimeStr},${this.room_id}号研讨室!`;
        this.msgType = 'success';
        this.$refs.message.open();
        // 清空
        this.DateIndex = -1;
        this.TimeIndex = -1;
      } catch (error) {
        console.log('%c [applyRoomAsync  ]-203', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
    //是否申请对话框关闭
    dialogClose () {
      this.$refs.alertDialog.close();
    },
    //小按钮详情对话框
    toggle () {
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open('center');
    },
    // 展示消息弹出框
    showMsg (type, msg) {
      this.msgType = type;
      this.messageText = msg;

      this.$refs.message.open();
    },
  },

  computed: {
    ...mapGetters('reservation', ['timeList', 'dateList']),
    ...mapState('user', ['token']),
    getTimeStr () {
      return `${this.startTime}~${this.endTime}`
    }
  }

};
</script>

<style lang="scss">
.details-container {
  background-color: #fff;
  position: relative;
  height: 100vh;

  uni-popup {
    .popup-content {
      height: 700rpx;
      width: 600rpx;

      .title {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 20rpx;
        background-color: #f8f8f8;

        text {
          margin-left: 10rpx;
        }
      }

      .content {
        padding: 20rpx 40rpx;
      }
    }
  }

  // 图片
  .room_image {
    height: 300rpx;
    position: relative;

    image {
      height: 300rpx;
      width: 100%;
    }

    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 10rpx 20rpx;

      .tips {
        width: 100%;
        font-size: 24rpx;
        color: #fff;
        font-weight: 700;
      }
    }
  }

  // 房间信息
  .detail_room_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 10rpx 20rpx;

    .room_location {
      .floor {
        height: 40rpx;
        line-height: 40rpx;
        color: #7f7f7f;
        font-size: 22rpx;
      }

      .room_number {}
    }

    .room-notice {
      display: flex;

      .icon-text {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        color: #7f7f7f;

        uni-icons {
          height: 40rpx;
          line-height: 40rpx;
        }

        text {
          font-size: 20rpx;
        }
      }
    }
  }

  // 分割线
  .line {
    content: '';
    height: 1rpx;
    width: 80%;
    margin: 10rpx auto;
    border-bottom: 1px solid lightgray;
  }

  // 预约日期
  .date {
    .date-title {
      font-size: 24rpx;
      font-weight: 700;
      text-indent: 28rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 10rpx 0;
    }

    scroll-view {
      .date-list {
        $itemNums: 7;
        $itemWidth: 200;
        display: flex;
        width: ($itemWidth * $itemNums) + rpx;
        padding: 20rpx 30rpx;
        gap: 30rpx;

        .date-item {
          display: flex;
          flex-direction: column;
          height: 150rpx;
          width: $itemWidth + rpx;
          align-items: center;
          justify-content: center;
          border: 1px solid gray;
          border-radius: 25rpx;
          font-size: 26rpx;

          // background-color: skyblue;
          &.active {
            background-color: skyblue;
            color: #fff;
          }

          .day {}

          .week {}
        }
      }
    }
  }

  // 预约时间
  .time {
    margin-top: 20rpx;

    .room-status-info {
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      font-size: 20rpx;
      // padding: 0 120rpx;
      gap: 80rpx;
      margin: 0 auto;
      justify-content: center;

      .reserved {
        position: relative;

        &::before {
          content: '';
          width: 20rpx;
          height: 20rpx;
          background-color: #c00000;
          position: absolute;
          top: 14rpx;
          left: -28rpx;
        }
      }

      .selected {
        position: relative;

        &::before {
          content: '';
          width: 20rpx;
          height: 20rpx;
          background-color: skyblue;
          position: absolute;
          top: 14rpx;
          left: -28rpx;
        }
      }

      .occupied {
        position: relative;

        &::before {
          content: '';
          width: 20rpx;
          height: 20rpx;
          background-color: gray;
          position: absolute;
          top: 14rpx;
          left: -28rpx;
        }
      }
    }

    scroll-view {
      padding: 20rpx 0;

      .time-list {
        $itemNums: 16;
        $itemWidth: 150;
        display: flex;
        width: ($itemNums * $itemWidth) + rpx;
        padding: 0 30rpx;
        gap: 30rpx;

        .time-item {
          display: flex;
          flex-direction: column;
          height: 160rpx;
          width: $itemWidth + rpx;
          align-items: center;
          justify-content: center;
          border: 1px solid gray;
          border-radius: 25rpx;
          font-size: 26rpx;

          // background-color: skyblue;
          &.active {
            background-color: skyblue;
            color: #fff;
          }

          &.occupied {
            background-color: gray;
            color: #fff;
          }
        }
      }
    }
  }

  // 申请的按钮
  .btn {
    width: 90%;
    position: absolute;
    bottom: 30rpx;
    left: 5%;

    .apply {
      align-items: center;
      background-color: skyblue;
      color: #fff;
      font-size: 32rpx;
    }
  }
}

// 滚动条失效
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
